<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="body-content">
            <div class="title-block">
              <!-- <el-input placeholder="请输入标题" v-model="inputTitle">
                <template slot="prepend" class="title-title">标题</template>
              </el-input> -->
            </div>
            <editor class="tinymce" v-model="tinymceHtml" :init="editorInit"></editor>
            <el-button type="primary" @click="onSubmit">完成</el-button>
            <el-button>取消</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="block">
            <div class="radio">
              排序：
              <el-radio-group v-model="reverse">
                <el-radio :label="false">正序</el-radio>
                <el-radio :label="true">倒序</el-radio>
              </el-radio-group>
            </div>

            <el-timeline :reverse="reverse">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.createTime"
              >
                <el-card>
                  <!-- <h4>更新 Github 模板</h4>
                      <p>王小虎 提交于 2018/4/12 20:46</p> -->
                  {{ activity.noteContent }}
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { fetchNoteList, newNote } from '@/api/table'

import tinymce from "tinymce/tinymce"; // tinymce默认hidden，不引入不显示
import Editor from "@tinymce/tinymce-vue";
// 引入富文本编辑器主题的js和css
// import 'tinymce/skins/content/default/content.css'
import "tinymce/themes/silver/theme.min.js";
import "tinymce/icons/default/icons"; // 解决了icons.js 报错Unexpected token '<'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/preview";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/help";
export default {
  data() {
    return {
      reverse: true,
      activities: [
        // {
        //   content: "活动按期开始",
        //   timestamp: "2018-04-15",
        // },
        // {
        //   content: "通过审核",
        //   timestamp: "2018-04-13",
        // },
        // {
        //   content: "创建成功",
        //   timestamp: "2018-04-11",
        // },
      ],
      editorInit: {
        // 为tinymce设置一个主体body的class
        body_class: "tinymce-body",
        language_url: "/tinymce/zh_CN.js",
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide",
        // skin_url: 'tinymce/skins/ui/oxide-dark', // 暗色系
        convert_urls: false,
        selector: 'textarea',
        branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”
        toolbar: false,
        width: "100%",
        height: 500,
        menubar: 'my1',
        menu: {
            my1: {title: '我的笔记', items: 'copy paste formats' }
        }
      },
      tinymceHtml: '',
      note: {
        ownerNickname: '',
        ownerAccount: '',
        // createTime: '',
        noteContent: ''
      }
    }
  },
  mounted(){
    // tinymce.init({
    //   selector: 'textarea',
    //   branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”
    //   toolbar: false,
    //   menubar: 'my1',
    //   menu: {
    //       my1: {title: '我的笔记', items: 'copy paste formats' }
    //   },
    // })
    tinymce.init({})
    this.getNoteList()
    console.log("new date--",new Date())
    console.log(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date()))
  },
  components: {
    editor: Editor,
  },
  computed: {
    ...mapGetters([
      'nickName',
      'token'
    ])
  },
  methods: {
    onSubmit() {
      this.createNewNote()
    },
    onCancel() {
      this.$message({
        message: "取消!",
        type: "warning",
      });
    },
    getNoteList() {
      fetchNoteList(this.token).then(response => {
        console.log(response)
        this.activities = response.data
      })
    },
    createNewNote(){
      var description = this.tinymceHtml
      description = description.replace(/(\n)/g, "");  
      description = description.replace(/(\t)/g, "");  
      description = description.replace(/(\r)/g, "");  
      description = description.replace(/<\/?[^>]*>/g, "");  
      description = description.replace(/\s*/g, "");
      console.log(description)
      this.note.ownerNickname = this.nickName
      this.note.ownerAccount = this.token
      // this.note.createTime = this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date())
      this.note.noteContent = description
      console.log(this.note)
      newNote(this.note).then(response => {
        console.log(response)
        if(response.data > 0){
          this.$message("提交成功!")
        }
      })
    },
    dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
.radio {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>

